<template>
	<view>
		 <view class="selectGoodsList" v-for="(item,index) in Gooditem" :key="index">
		 	<view class="goodListItem" :class="selectLookMore == index?'goodListItem lookMore':''">
		 		<view class="goodsTitle">
		 	    <span style="float: left;">{{item.GoodsName}} </span>
		 		<button @click="RemoveGood(index)" style="color: red;float: right;">删除</button>
		 		<button @click="lookGoodsInfo(index)" style="float: right;">查看更多</button>
		 		</view>
		 		<view @click="clickEnd(index)">
		 			<view style="padding: 5px;height: 220upx;">
		 				<img class="list_img" @tap.stop="ViewImage('http://192.168.1.51:9000/picture'+item.Goods_Image_Path1)" v-if="item.Goods_Image_Path1!=''&&item.Goods_Image_Path1!=undefined" :src="'http://192.168.1.51:9000/picture'+item.Goods_Image_Path1" alt="">
		 				<img class="list_img" @tap.stop="ViewImage('../../static/image/unUplad.png')"  v-else src="../../static/image/unUplad.png" alt="">
		 				<view class="goods_font" >编号:{{item.GoodsCode}}</view>
		 				<view class="goods_font">单价:{{item.Price}}</view>
		 				<view class="goods_font goods_num"> 源单数量:<span class="snum">{{item.hasqty}}</span>
		 				<span style="margin-left: 8px;color: rgb(0, 140, 7);">录入数量:<span class="snum">{{item.Qty}}</span></span>
						</view>
		 				<view class="goods_font"> 库存:{{item.stockqty}}
		 				<span style="margin-left: 15px;">金额:{{item.Amount}}</span></view>
		 			</view>
		 			<view class="goods-itemWrap">
		 				<text class="good-item">单位:{{item.UnitName}}</text>
		 				<text class="good-item" style="flex:2;padding-left: 5px;">税率:{{item.Tax}}</text>
		 			</view>
		 			<view class="goods-itemWrap">
		 				<text class="good-item">折扣:{{item.Discount}}</text>
		 			</view>
		 			<view class="goods-itemWrap">
		 				<text class="good-item">备注:{{item.Remark}}</text>
		 			</view>
		 		</view>
		 	</view>
		 </view>
	</view>
</template>

<script>
	import * as GetApi from '@/syApis/syHttp/Http.js';
	export default {
		data() {
			return {
				selectLookMore: -1,
			}
		},
		props:['Gooditem'],
		methods: {
			//查看图片
			ViewImage:function(e){
				uni.previewImage({
					current: e,
					urls:[e] 
				});
			},
			//点击了删除按钮
			RemoveGood(index) {
				var that = this
				// console.log(this)
				uni.showModal({
					title: '提示',
					content: '是否删除此商品?',
					style:'z-index:99999',
					success: function(res) {
						if (res.confirm) {
							that.$emit("remove",{index})
							// console.log(this)
						} 
					}
				});
			},
			//点击展开 点击收起
			lookGoodsInfo(index) {
				this.selectLookMore = this.selectLookMore == index?-1:index			
			},
			//点击了编辑商品
			clickEnd:function(index){
				this.$emit("update",{index})
			},
			//保留两位小数
			toFix:function(evt){
				return evt = evt == "" || evt == undefined ?"":parseFloat(evt)
							 // if(evt == ""|| evt==undefined){
								//  return evt
							 // }
							 // evt = parseFloat(evt);
							 // return evt.toFixed(2)//此处2为保留两位小数
			},
		}
	}
</script>

<style>
		.selectGoodsList {
			width: 100%;
			padding-top: 8px; 
		}
	     .selectGoodsList:last-child{
			 padding-bottom: 100upx;
		 }
		.selectGoodsList .goodListItem {
			width: 94%;
			border-radius: 15upx;
			margin: auto;
			overflow: hidden;
			background: #FFF;
			height: 300upx;
			/* box-shadow: 0 0px 4px 0 rgba(12,12,13,0.1); */
			box-shadow: 0 0px 4px 0 rgb(148, 148, 181);
		}
	
		.selectGoodsList .goodListItem.lookMore {
			display: table;
		}
	
		.selectGoodsList .goodListItem .goodsTitle {
			width: 100%;
			height: 80upx;
			line-height: 80upx;
			/* background: rgb(115, 155, 195); */
			background: rgb(96, 188, 204);
			/* background: #549dd1; */
			/* background: #3fc68e; */
			/* background: #3fc68e; */
			box-sizing: border-box;
			font-size: 32upx;
			padding: 0upx 15upx;
			color: #FFF;
			position: relative;
		}
	
		.selectGoodsList .goodListItem .goodsTitle button {
			/* position: absolute; */
			height: 50upx;
			line-height: 50upx;
			font-size: 24upx;
			text-align: center;
			border-radius: 30upx;
			border: none;
			background: #FFF;
			/* right: 15upx; */
			top: 15upx;
			color: #5d5d5d;
			margin: 0 3px;
			/* padding: 0 5px; */
		}
	
		.selectGoodsList .goodListItem .goods-itemWrap {
			width: 100%;
			box-sizing: border-box;
			padding: 0upx 15upx;
			height: 60upx;
			line-height: 60upx;
			display: flex;
		}
	
		.selectGoodsList .goodListItem .goods-itemWrap text {
			flex: 1;
		}
		.list_img{
			width: 30%;float: left;border-radius: 5px;height: 100%;
		}
		.goods_font{
			width: 65%;
			/* float: right; */
			float: left;
			padding-left: 5px;
			line-height: 50upx;
		}
		.goods_num{
			/* font-weight: 400; */
			font-weight: bold;
			font-size: 30upx;
			color:#1976D2 ;
			/* border: 1px solid #000; */
		}
		.snum{
			/* border: 1px solid #000; */
			color: #fff;
			padding: 0px 5px;
			margin-left: 2px;
			background-color: #1976D2;
			/* border-radius: 3px; */
		}
</style>
